<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>默认点标记</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .select-icon,
        .add-icon {
            width: 25px;
            height: 34px;
            background-image: url("//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png");
            background-size: 25px 34px;
            box-sizing: border-box;
            text-align: center;
            line-height: 22px;
            color: #FFF;
            font-size: 13px;
        }
		.select-icon {
			background-image: url("//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png");
		}


   

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}

.add-icon:hover {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15"></script>
<script type="text/javascript">
	
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13
    });

	window.onload = function(){
		//#112.878596|28.207214|木林森饭店
		let args = window.decodeURIComponent(window.location.hash.substr(1)).split("|");
		add(args[0],args[1],args[2]);
	}
 	
 	window.add = function(lng,lat,title){
 		let temp = new AMap.Marker({
	        position: [lng,lat],
	        offset: new AMap.Pixel(-13, -30)
	    });
	    let div = document.createElement("div");
	    div.setAttribute("title",title);
	    div.className="add-icon";
	    temp.setContent(div);
	    temp.setMap(map);
	    map.setCenter([lng,lat]);
 	}
 	
</script>
</body>
</html>